<template>
	<x-border :title="viewModel.name" v-if="async">
		<div class="admin-hudong-edit">
			<div class="hudong-edit-box">
				<div class="hudong-edit_left">
					<div class="hudong-edit_form">
						<el-form>
							<el-form-item label="活动名称">
								<div class="lable-text">{{viewModel.name}}</div>
								<div class="stored-edit_intro">活动名称</div>
							</el-form-item>
							<el-form-item label="是否启用">
								<el-switch v-model="viewModel.isEnable"></el-switch>
								<div class="stored-edit_intro">请确认是否启用该活动</div>
							</el-form-item>
							<el-form-item label="是否需要登录">
								<el-switch v-model="viewModel.needLogin"></el-switch>
								<div class="stored-edit_intro">是否需要会员登录才可以参加活动或完成抽奖</div>
							</el-form-item>
							<el-form-item label="每人每日可抽奖次数">
								<el-input-number v-model="viewModel.drawCount" width="150px" controls-position="right"></el-input-number>
								<div class="stored-edit_intro">请设置每人每天最多抽奖次数,0表示限制</div>
							</el-form-item>
							<el-form-item label="抽奖规则">
								<el-input type="textarea" v-model="viewModel.drawRule" rows="5" width="150px"></el-input>
								<div class="stored-edit_intro">请设置抽奖规则</div>
							</el-form-item>
						</el-form>
					</div>
					<x-line :border="true" title="奖品设置" icon="null" type="metal">
						<div class="line-buttom" v-if="$route.query.Type !== 'BigWheel'" slot="headerRight" @click="awardsAdd">新增奖品设置</div>
					</x-line>
					<div class="hudong-edit_table">
						<el-table :data="viewModel.awards">
							<el-table-column label="图片" width="70px">
								<template slot-scope="scope">
									<x-select-image :cssStyle="screen" v-model="scope.row.img" class="hudongImageUpload"></x-select-image>
								</template>
							</el-table-column>
							<el-table-column label="奖品等级" width="150px">
								<template slot-scope="scope">
									<el-input v-model="scope.row.grade"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="获奖机率" width="150px">
								<template slot-scope="scope">
									<el-input v-model="scope.row.rate"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="奖项数量" width="150px">
								<template slot-scope="scope">
									<el-input v-model="scope.row.count"></el-input>
								</template>
							</el-table-column>
							<el-table-column label="奖品类型" width="150px">
								<template slot-scope="scope">
									<el-select v-model="scope.row.type" placeholder="请选择奖品类型">
										<el-option v-for="item in express" :key="item.Key" :label="item.value" :value="item.key"></el-option>
									</el-select>
								</template>
							</el-table-column>
							<el-table-column label="奖品含量" width="150px">
								<template slot-scope="scope">
									<div class="column_text">
										<el-input v-model="scope.row.worth"></el-input>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="设置说明">
								<template slot-scope="scope">
									<div class="column_text">
										<el-input v-model="scope.row.intro"></el-input>
									</div>
								</template>
							</el-table-column>
							<el-table-column label="操作" width="100px">
								<template slot-scope="scope">
									<div class="colomn_btn" @click="drawDelete(scope.$index)">删除</div>
								</template>
							</el-table-column>
						</el-table>
					</div>
					<x-line :border="true" title="游戏规则设定" type="metal"></x-line>
					<div class="game-rule">
						<div class="activity-content">
							<p>活动内容：</p>
							<p>1.完结每次游戏，消耗兑换券。</p>
							<p>2.玩家获奖可以在个人中心，查找奖品，到店铺进行兑换。</p>
							<p>2.玩家获奖可以在个人中心，查找奖品，到店铺进行兑换。</p>
							<p>4.获得的奖品有：购物券、奖品、储值等。</p>
						</div>
						<div class="infuse-box">
							<div class="infuse-text">注：</div>
							<div class="infuse-conter">
								<p>1.获奖次数必填，具体数值参考获奖几率，2个值比例相同，设置中奖次数满额后，该商品不在中奖，中奖几率累加到购物券。</p>
								<p>2.获奖几率之和必须是100。</p>
								<p>3.玩家获奖可以在个人中心，查找奖品，到店铺进行兑换，</p>
								<p>4.购物券、储值金额自动进入玩家账户，无需兑换。</p>
								<p>5.获得的奖品有：购物券、奖品、储值等。</p>
							</div>
						</div>
					</div>
				</div>
			</div>
			<div class="stored_footer">
				<div class="stored_btn" @click="saveForm">保存</div>
			</div>
			<x-line :border="true" icon="flaticon-exclamation" title="操作说明"></x-line>
			<ul class="hodong-zkAutoFormUl">
				<li class="hodong-zkAutoFormList" v-for="(item, index) in buttomHelpText" :key="index">
					{{index+1}}、<span v-html="item"></span>
				</li>
			</ul>
		</div>
	</x-border>
</template>
<script>
	import ala from 'ala'
	export default {
		data() {
			return {
				express: '',
				viewModel: null,
				screen: {
					width: '55px',
					height: '55px'
				},
				buttomHelpText: ['通过此处添加互动活动'],
				async: false
			}
		},
		props: {
			widgetData: {}
		},
		mounted() {
			this.init()
		},
		methods: {
			async init() {
				this.express = await this.$api.typeKeyValues('HudongAwardType')
				var para = {
					key: this.$ala.urlType()
				}
				var response = await this.$ala.httpGet('api/Hudong/GetView', para)
				if (response) {
					this.viewModel = response
				}
				this.async = true
			},
			drawDelete(vIndex) {
				this.viewModel.awards.splice(vIndex, 1)
			},
			awardsAdd() {
				var addPara = {
					img: '',
					grade: '一等奖',
					rate: 0,
					count: 0,
					type: 5,
					worth: 0,
					intro: ''
				}
				this.viewModel.awards.push(addPara)
			},
			async saveForm(model) {
				this.viewModel.key = this.$ala.urlType()
				var response = await this.$ala.httpPost('api/Hudong/edit', this.viewModel)
				if (response) {
					this.$ala.toMessage(response)
				}
			}
		},
		watch: {
			$route(val, from) {
				this.init()
			}
		}
	}
</script>
<style rel="stylesheet/scss" scoped lang="scss">
	@import "./admin-hudong-edit.scss";
</style>